<template>
  <div class="app-container">
    <div class="filter-tools">
      <el-form :inline="true" :model="filter" class="filter-form">
        <el-form-item label="接口ID">
          <el-input
            v-model="filter.api_id"
            placeholder="接口.ID"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="用例ID">
          <el-input
            v-model="filter.param_id"
            placeholder="用例.ID"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="创建人">
          <el-input
            v-model="filter.created_adminer"
            placeholder="创建人"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="更新人">
          <el-input
            v-model="filter.updated_adminer"
            placeholder="更新人"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="ID">
          <el-input
            v-model="filter.id"
            placeholder="ID"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="getList()">
            筛选
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table">
      <el-table v-loading="dataLoading" :data="dataList" :height="height" border>
        <el-table-column
          prop="id"
          label="ID"
          align="center"
          width="80"
        />
        <el-table-column label="项目/产品/模块" min-width="150">
          <template slot-scope="scope">
            <div class="goto" @click="goProject(scope.row)"><b>项目名称:</b>{{scope.row.project_name}}</div>
            <div class="goto" @click="goProduct(scope.row)" ><b>产品名称:</b>{{scope.row.product_name}}</div>
            <div class="goto" @click="goCate(scope.row)"><b>项目组:</b>{{scope.row.cate_name}}</div>
            <div><b>子模块:</b>{{scope.row.s_module_name}}</div>
            <div class="goto" @click="goModuleFList(scope.row)"><b>主模块:</b>{{scope.row.f_module_name}}</div>
          </template>
        </el-table-column>
        <el-table-column label="接口信息"  min-width="200">
          <template slot-scope="scope">
            <div class="goto" @click="goApi(scope.row)"><b>接口名:</b>{{scope.row.api_name}}</div>
            <div><b>域名:</b>{{scope.row.host_url}}</div>
            <div class="goto" @click="goApi(scope.row)"><b>接口:</b>{{scope.row.api}}</div>
            <div><b>请求方式:</b>{{scope.row.method_type_lable}}</div>
            <div><b>环境标示:</b>{{scope.row.host_env}}</div>
          </template>
        </el-table-column>
        <el-table-column label="请求头"  min-width="250">
          <template slot-scope="scope">
            <json-viewer
              :value="scope.row.headers"
              :expand-depth=5
              copyable
              boxed
              sort></json-viewer>
          </template>
        </el-table-column>
        <el-table-column label="用例"  min-width="200">
          <template slot-scope="scope">
            <json-viewer
              :value="scope.row.param"
              :expand-depth=5
              copyable
              boxed
              sort></json-viewer>
          </template>
        </el-table-column>
        <el-table-column label="最近一次测试返回值"  min-width="250">
          <template slot-scope="scope">
            <json-viewer
              :value="scope.row.recently_res"
              :expand-depth=5
              copyable
              boxed
              sort></json-viewer>
          </template>
        </el-table-column>
        <el-table-column label="验证历史"  min-width="200">
          <template slot-scope="scope">
            <div class="goto" @click="goTestValidator(scope.row)"><b>验证历史：</b>{{scope.row.test_sum || 0}}条</div>
            </br>
            <el-button class="goto" @click="goTestValidator(scope.row)">查看验证历史</el-button>
          </template>
        </el-table-column>
        <el-table-column
          prop="key"
          label="验证字段"
          align="center"
        />
        <el-table-column
          prop="validator_value"
          label="期望值"
          align="center"
        />
        <el-table-column label="时间/人" min-width="200">
          <template slot-scope="scope">
            <div><b>更新时间:</b>{{scope.row.updated_at}}</div>
            <div><b>更新人:</b>{{scope.row.updated_adminer}}</div>
            <div><b>创建时间:</b>{{scope.row.created_at}}</div>
            <div><b>创建人:</b>{{scope.row.created_adminer}}</div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="180">
          <template slot-scope="scope">
            <el-button-group>
              <el-button
                icon="el-icon-edit"
                type="primary"
                size="mini"
                @click="handleEdit(scope.row)"
              >
                编辑
              </el-button>
              <el-button
                icon="el-icon-folder-delete"
                type="danger"
                size="mini"
                @click="setCate(scope.row)"
              >
                删除
              </el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        :current-page="filter.page"
        :page-sizes="[10, 20, 30, 50, 100]"
        :page-size="filter.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="filter.total"
        @size-change="handleSizeChange"
        @current-change="getList"
      ></el-pagination>
    </div>

    <el-dialog title="编辑" :visible.sync="dialogStatus" width="900px">
      <el-form :model="formData" label-width="80px">
        <el-form-item label="所属:">
          <p><b>开发组:</b>《{{formData.cate_name}}》-><b>项目:</b>《{{formData.project_name}}》-><b>产品:</b>《{{formData.product_name}}》</p>
          <p><b>主模块:</b>《{{formData.f_module_name}}》-><b>子模块:</b>《{{formData.s_module_name}}》</p>
          <p><b>接口名:</b>《{{formData.api_name}}》-><b>接口:</b>{{formData.api}}&ensp;&ensp;&ensp;{{formData.method_type_lable}}
            &ensp;&ensp;&ensp; <b>域名:</b>{{formData.api_url}}</p>
        </el-form-item>
        <el-form-item label="用例:">
          <json-viewer
            :value="formData.param"
            :expand-depth=5
            copyable
            boxed
            sort></json-viewer>
        </el-form-item>
        <el-form-item label="验证结果返回字段:">
          <el-input v-model="formData.key" placeholder="验证结果返回字段" class="filter-item"/>
        </el-form-item>
        <el-form-item label="返回结果等于值:">
          <el-input v-model="formData.validator_value" placeholder="返回结果等于值" class="filter-item"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogStatus = false">取消</el-button>
        <el-button type="primary" @click="saveForm()">提交</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import * as api from '@/api/api/validatorApi' // API接口
import {uploadUrl} from '@/config/index'
export default {
  name: 'apisValidatorList',
  data() {
    return {
      uploadUrl:uploadUrl,
      height:this.$baseTableHeight(1),
      filter: {
        id:"",
        page: 1,
        pageSize: 10,
        total: 0,
        api_id:"",
        param_id:"",
        key: '',
        value:"",
        created_adminer:"",
        updated_adminer:""
      },
      dataLoading: true,
      dataList: [],
      dialogStatus:false,
      formData:{},
      topStatus:0,
    }
  },
  created() {
    this.filter.id = this.$route.query.cate_id || null
    this.filter.api_id = this.$route.query.api_id || null
    this.filter.param_id = this.$route.query.param_id || null
    this.getList()
  },
  methods: {
    getList(page = 1) {
      this.filter.page = Number(page)
      api.list(this.filter).then((res) => {
        this.dataList = res.data.list
        this.filter.total = res.data.total
        this.dataLoading = false
      })
    },
    handleSizeChange(val) {
      this.filter.pageSize = val
      this.getList(1)
    },
    handleEdit(data){
      this.formData = {
        id:data.id,
        cate_name:data.cate_name,
        project_name:data.project_name,
        product_name:data.product_name,
        f_module_name:data.f_module_name,
        s_module_name:data.s_module_name,
        s_module_id:data.s_module_id,
        method_type_lable:data.method_type_lable,
        api_name:data.api_name,
        api:data.api,
        api_id:data.api_id,
        api_url:data.host_url,
        param_id:data.param_id,
        param:data.param,
        key:data.key,
        validator_value:data.validator_value,
      },
        this.dialogStatus = true
    },
    saveForm(){
      api.save(this.formData).then((res) => {
        this.getList();
        this.$message.success(res.userMsg)
        this.dialogStatus = false
      })
    },
    setCate(data){
      api.set({id:data.id}).then((res) => {
        this.getList();
        this.$message.success(res.userMsg)
      })
    },
    goProject(data){
      this.$router.push({path:'/project/projectList',query:{project_id:data.project_id}});
    },
    goProduct(data) {
      this.$router.push({path:'/project/productList',query:{product_id:data.product_id}});
    },
    goCate(data) {
      this.$router.push({path:'/project/projectCate',query:{cate_id:data.cate_id}});
    },
    goModuleFList(data) {
      this.$router.push({path:'/module/moduleFList',query:{module_id:data.p_id}});
    },
    goApi(data) {
      this.$router.push({path:'/api/apiList',query:{api_id:data.api_id}});
    },
    goTestValidator(data) {
      this.$router.push({path:'/runTest/testValidatorRes',query:{validator_id:data.id}});
    }
  },
}
</script>

<style>
.avatar-uploader .el-upload{
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
</style>
<style lang="scss" scoped>
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.goto:hover{color: #0051ff;}
.goto{
  cursor:pointer
}
</style>


